<template>
  <div id="start">
    <div class="docsMain">
      <div class="page_container">
        <div class="scrollbar">
          <div class="side_nav">
            <div class="title">起步</div>
            <div
              :class="subtitleIndex==0?'subtitle subtitleAct':'subtitle'"
              @click="toSubtitle(0)"
            >安装</div>
            <div
              :class="subtitleIndex==1?'subtitle subtitleAct':'subtitle'"
              @click="toSubtitle(1)"
            >快速上手</div>
          </div>
        </div>
        <div class="component__content">
          <div class="content">
            <install v-if="subtitleIndex==0" @toSubtitle="toSubtitle" />
            <getStarted v-else />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import getStarted from "./getStarted";
import install from "./install";
export default {
  name: "",
  components: {
    getStarted,
    install,
  },
  data() {
    return {
      subtitleIndex: 0,
    };
  },
  computed: {},
  methods: {
    toSubtitle(index) {
      this.subtitleIndex = index;
      sessionStorage.setItem("subtitleIndex", index);
    },
  },
  created() {
    if (sessionStorage.getItem("subtitleIndex")) {
      this.subtitleIndex = sessionStorage.getItem("subtitleIndex");
    } else {
      sessionStorage.setItem("subtitleIndex", 0);
    }
  },
  mounted() {},
};
</script>
<style lang='scss'>
@import "../../styles/docs_main.scss";
#start {
  .scrollbar {
    width: 200px;
  }
  .component__content {
    padding-left: 270px;
  }
  .subtitleAct {
    border-right: 3px solid #1890ff;
    color: deepskyblue;
    background-color: #e6f7ff;
  }
}
</style>